<template>
  <div class="my-footer">
    <!-- 第一块 -->
    <section class="footer-contact">
      <!-- 左边 联系方式 -->
      <ul class="footer-contact-list">
        <li>
          <!-- <h3>客户热线电话</h3> -->
          <!-- ？ -->
          <!-- <div class="contact-text">058-234-2255</div> -->
        </li>
        <li>
          <!-- <h3>客户服务信箱</h3> -->
          <!-- ？ -->
          <!-- <div class="contact-text">15415465415@163.com</div> -->
        </li>
        <li>
          <!-- <h3>客户投诉建议邮箱</h3> -->
          <!-- ？ -->
          <!-- <div class="contact-text">sadnjsa@163.com</div> -->
        </li>
      </ul>
      <!-- 右边 二维码 -->
      <div class="footer-code">
        <!-- 第一个二维码 -->
        <div class="wechat">
          <!-- <div class="wechat-code"></div> -->
          <!-- <span>关注微信</span> -->
        </div>
        <!-- 第二个二维码 -->
        <div class="app">
          <!-- <div class="app-code"></div> -->
          <!-- <span>手机版</span> -->
        </div>
      </div>
    </section>
    <!-- 第二块 -->
    <section class="footer-link">
      <!-- 1 -->
      <dl>
        <dt>新手上路</dt>
        <dd><a href="">新人须知</a></dd>
        <dd><a href="">服务与费用</a></dd>
        <dd><a href="">账户管理</a></dd>
        <dd><a href="">会员等级和番币</a></dd>
      </dl>
      <!-- 2 -->
      <dl>
        <dt>购物指南</dt>
        <dd><a href="">挑选商品</a></dd>
        <dd><a href="">购物流程</a></dd>
        <dd><a href="">如何生成订单</a></dd>
        <dd><a href="">查询订单状态</a></dd>
      </dl>
      <!-- 3 -->
      <dl>
        <dt>支付说明</dt>
        <dd><a href="">paypal 支付</a></dd>
        <dd><a href="">国际信用卡</a></dd>
        <dd><a href="">国内银行卡</a></dd>
        <dd><a href="">其他汇款方式</a></dd>
      </dl>
      <!-- 4 -->
      <dl>
        <dt>配送说明</dt>
        <dd><a href="">运输方式和费用对比</a></dd>
        <dd><a href="">大宗商品的运费</a></dd>
        <dd><a href="">海关及税项</a></dd>
        <dd><a href="">收货注意事项</a></dd>
      </dl>
      <!-- 5 -->
      <dl>
        <dt>售后服务</dt>
        <dd><a href="">商品退换货原则</a></dd>
        <dd><a href="">商品退换货流程</a></dd>
        <dd><a href="">商品的保管期限</a></dd>
        <dd><a href="">如何退款</a></dd>
      </dl>
      <!-- 6 -->
      <dl>
        <dt>常用工具</dt>
        <dd><a href="">费用估算</a></dd>
        <dd><a href="">包裹跟踪</a></dd>
        <dd><a href="">汇率换算</a></dd>
        <dd><a href="">尺码换算</a></dd>
      </dl>
      <!-- 7 -->
      <dl>
        <dt>关于我们</dt>
        <dd><a href="">联系我们</a></dd>
        <dd><a href="">加入 XXX</a></dd>
        <dd><a href="">友情链接</a></dd>
        <dd><a href="">网站地图</a></dd>
      </dl>
    </section>
    <section class="footer-hide">
      <div class="copyright">
        Copyright ©2019 KoKo代购! Inc. All rights reserved.
      </div>
      <div class="cooperation">
        <!-- 图片 -->
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="cp-desc">
        <p>
          KoKo代购是全球最大的海外华人代购中国商品网站，专为海外华人提供
          <a href="">淘宝代购</a>
          、京东、当当等中国购物网站商品，提供图书、特产、化妆品等多种商品代购，支持
          paypal 、 支付宝等多种支付方式KoKo
          代购目前在美国、英国、新加坡、澳洲、加拿大等全球范围内的
          华人代购和留学生代购市场中都有着超好的口碑。
        </p>
      </div>
      <div class="cp-beian">
        <span>
          备案号：
          <a href="">沪ICP备20015857号</a>
        </span>
        <span>
          <a href="">
            <span></span>
            <span>沪公网安备 31011202012909号</span></a
          >
        </span>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    // this.axios.get("/guide").then((res) => {
    //   console.log(res);
    // });
  },
};
</script>

<style lang="scss" scoped>
* {
  list-style-type: none;
  margin: 0;
  padding: 0;
  user-select: none;
}
.my-footer {
  background-color: #2e3033;
  font-size: 12px;
  display: block;
}
section {
  margin: 0 auto;
  width: 1200px;
}
// 第一部分
.footer-contact .footer-contact-list {
  display: flex;
  justify-content: space-between;
  width: 620px;
  padding-top: 30px;
}
.footer-contact {
  background: #2e3033;
  color: #fff;
  padding: 20px 50px 5px 70px;
  border-bottom: 1px solid #45494d;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .footer-contact-list {
    h3 {
      color: #ccc;
      font-size: 14px;
      line-height: 30px;
      font-weight: 400;
    }
    .contact-text {
      font-size: 20px;
      line-height: 34px;
    }
  }
  .footer-code {
    text-align: center;
    width: 273px;
    display: flex;
    justify-content: space-between;
    .wechat-code,
    .app-code {
      height: 106px;
      width: 106px;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F06%2F20180606220653_uk8YF.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667995431&t=aa1ad64718cab65405a0e8f61109e72a)
        no-repeat center/cover;
    }
  }
}

//第二部分
.footer-link {
  overflow: hidden;
  padding: 5px 0 20px 78px;
  border-bottom: 1px solid #45494d;
  box-sizing: border-box;
  a {
    color: #e6e6e6;
    text-decoration: none;
  }
  dl {
    float: left;
    width: 156px;
    dt {
      font-size: 18px;
      color: #e6e6e6;
      height: 48px;
      vertical-align: middle;
      display: table-cell;
    }
    dd {
      a {
        font-size: 12px;
        color: #b3b3b3;
        line-height: 28px;
      }
    }
  }
}
//第三部分
.footer-hide {
  text-align: center;
  padding: 20px 70px;
  font-size: 12px;
  color: gray;
  box-sizing: border-box;
  a {
    color: gray;
    text-decoration: none;
    cursor: pointer;
  }
  > .cooperation {
    width: 704px;
    height: 46px;
    margin: auto auto 20px;
    > ul {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      > li {
        width: 110px;
        height: 46px;
        background: no-repeat center;
        background-size: 110px 46px;
      }
      :nth-child(1) {
        background: url("../assets/footer/logo1.png");
      }
      :nth-child(2) {
        background: url("../assets/footer/logo2.png");
      }
      :nth-child(3) {
        background: url("../assets/footer/logo3.png");
      }
      :nth-child(4) {
        background: url("../assets/footer/logo4.png");
      }
      :nth-child(5) {
        background: url("../assets/footer/logo5.png");
      }
      :nth-child(6) {
        background: url("../assets/footer/logo6.png");
      }
    }
  }
  > .cp-beian {
    display: flex;
    align-items: center;
    margin-top: 20px;
    text-align: center;
    color: gray;
    justify-content: center;
    > :nth-child(1) {
      margin-right: 40px;
    }
  }
}
</style>